<template>
  <view class="content-two">
    <view class="top">
      <view class="text-login"> 请输入验证码 </view>
      <view class="go-text"> 验证码已发送至您的手机 </view>
    </view>

    <view class="phone_code_single" style="position: relative; top: -200rpx">
      <input
        class="phone_code_single_cinput"
        adjust-position="false"
        auto-focus
        auto-blur="true"
        @blur="codeNumBlurFun"
        @input="codeNumInputFun"
        :focus="focus"
        v-model="code"
        type="number"
        maxlength="4"
        style="opacity: 0"
        height="300px"
      />
      <view class="phone_code_single_codeinput">
        <view
          v-for="(item, index) in 4"
          class="input-item"
          :key="index"
          @click="codefocusFun(index)"
          :style="
            code[index] || code[index] === 0
              ? 'background-color:#2a82e4; color:#fff; border:none'
              : ''
          "
        >
          {{ code[index] }}
        </view>
      </view>
    </view>

    <view class="keyboard-container">
      <view v-for="item in keyboard" :key="item" @click="handleKeyClick(item)">
        <text v-if="item !== 'icon'">
          {{ item }}
        </text>
        <u-icon name="backspace" v-else></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      code: '', // 验证码
      focus: true, // 焦点
      keyboard: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', 'icon'] // 键盘上的数字
    }
  },
  onLoad(options) {},

  methods: {
    /**

     * DESC: 输入框输入事件
     * */
    codeNumInputFun(e) {
      let val = e.detail.value
      this.code = val
    },
    /**

     * DESC: 输入框失去焦点事件
     * */
    codeNumBlurFun(e) {
      let val = e.detail.value
      this.focus = false
    },
    /**

     * DESC: 输入框点击事件
     * @param {Number} index 当前点击框索引
     * */
    codefocusFun(index) {
      this.focus = true
    },
    handleKeyClick(e) {
      if (!e) return
      if (this.code.length === 4 && e !== 'icon') return
      if (e !== 'icon') {
        this.code += e
        this.focus = true
      } else {
        this.code = this.code.substr(0, this.code.length - 1)
        this.focus = true
      }
    }
  }
}
</script>

<style lang="scss">
@function rpx($num) {
  @return $num + rpx;
}
.content-two {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.top-text {
  margin-top: 174rpx;
}

.shuru {
  font-size: 72rpx;
  font-weight: 400;
  letter-spacing: 0px;
  color: rgba(0, 0, 0, 1);
  text-align: left;
  vertical-align: top;
  margin-left: 80rpx;
  margin-bottom: 26rpx;
}

.go-text {
  font-size: 32rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 23.17px;
  color: rgba(0, 0, 0, 1);
  margin-left: 80rpx;
}

.input-container {
  display: flex;
  width: 100%;
  margin-top: 240rpx;
  margin-bottom: 116rpx;
  justify-content: space-around;
  position: absolute;
  top: rpx(320);
}

.input-item {
  width: 64px;
  height: 64px;
  opacity: 1;
  border-radius: 16px;
  background: rgba(146, 143, 255, 0.1);
  border: 1.5px solid rgba(146, 143, 255, 1);
  text-align: center;
  font-size: 40rpx;
  font-weight: 700;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  border: 1px solid #2a82e4;
  &.filled {
    background-color: #2a82e4;
    color: #fff;
  }
}

.keyboard-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
  font-size: 48rpx;
  font-weight: 500;
  color: rgba(18, 24, 38, 1);
  text-align: center;
  vertical-align: top;
  position: fixed;
  width: 100%;
  bottom: 30rpx;
}

.keyboard-container view {
  width: 33.33%; /* 设置为三分之一宽度，以适应三个数字一行 */
  text-align: center;
  margin-bottom: 10px;
}

.top {
  width: rpx(750);
  height: rpx(750);
  background: url('../../../static/images/login/bg2.png') no-repeat;
  background-size: 100% 100%;
  padding-top: rpx(160);
}
.text-login {
  font-size: 72rpx;
  font-weight: 400;
  letter-spacing: 0px;
  color: rgba(0, 0, 0, 1);
  text-align: left;
  vertical-align: top;
  margin-left: 80rpx;
  margin-bottom: 26rpx;
}

.go-text {
  font-size: 32rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 23.17px;
  color: rgba(0, 0, 0, 1);
  margin-left: 80rpx;
}
.phone_code_single_codeinput {
  display: flex;
}
</style>
